<template>
    <div class="banner">
        <div class="swiper" ref="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in banner" :key="index">
                    <img :src="item" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle.esm.js";
import "swiper/swiper.min.css";
// import { mapState } from "vuex";
export default {
    name: "banner",
    data() {
        return {
            banner: ["https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u553.png",
                "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u550.png",
                "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u547.png"
            ]

        };
    },
    //   computed: {
    //     ...mapState("goodsDetail", { data: "banner" }),
    //   },
    mounted() {
        new Swiper(this.$refs.banner, {
            loop: true,
            autoplay: {
                disableOnInteraction: false,
                delay: 2000,
            },
            observer: true,
            observeParents: true,

            on: {
                slideChangeTransitionEnd: (swiper) => {
                    this.index = swiper.realIndex + 1;
                },
            },
        });
    },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
    @return ($px / 750) * 100vw;

}

.banner {
    position: relative;

}

.swiper-slide {
    width: 90%;
    height: vw(300);

    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}</style>
